<template>
<div class="">
  <div class="top-group">
    <el-button type="primary" icon="el-icon-plus" @click="onAddHostButtonClick">新增Host</el-button>
  </div>

  <el-table
    :data="project.host_list"
    style="width: 100%">
    <el-table-column
      prop="name"
      label="名称">
    </el-table-column>
    <el-table-column
      prop="host"
      label="Host">
    </el-table-column>
    <el-table-column
      prop="description"
      label="描述">
    </el-table-column>
    <el-table-column
      label="操作" 
      width=300>
      <template slot-scope="scope">
        <el-button size="mini"  @click="onEditHost(scope.row)">编辑</el-button>
        <el-button type="danger" size="mini" @click="onDeleteHost(scope.row,scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog title="Host设置" :visible.sync="hostDialogVisible">
    <el-form ref="hostForm" :model="hostForm" label-width="80px" :rules="hostRules">
      <el-form-item label="名称" prop="name">
        <el-input v-model="hostForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="host" prop="host">
         <el-input v-model="hostForm.host" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input type="textarea" v-model="hostForm.description" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="hostDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="onSubmitAddHost" :loading="hostLoading">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script type="text/ecmascript-6">
import Vue from 'vue'
export default {
  name: "HostList",
  props: ['project'],
  data() {
    return {
      hostDialogVisible: false,
      hostForm: {
        id: "",
        name: "",
        host: "",
        description: "",
        project_id:""
      },
      hostRules: {
        name: [{required: true,trigger: "blur",message:"请输入host名称！"}],
        host:[{required: true,trigger: "blur",message:"请输入host！"}]
      },
      hostLoading: false
    }
  },
  components: {},
  mounted(){
    this.$http.getHostList().then(res => {
      const projects = res.data
      this.project.host_list = projects
    })
  },
  methods: {
    initHostForm(){
      this.hostForm = {
        name: "",
        host: "",
        description: ""
      }
    },
    


     onSubmitAddHost(){
      this.$refs['hostForm'].validate(valid => {
        if(!valid){
          return;
        }
        console.log(this.dialogType)
        if(this.dialogType=='add'){
        const params = JSON.parse(JSON.stringify(this.hostForm))
        console.log(params)
        params.project_id = this.project.id
        this.hostLoading = true
        this.$http.addHost(params).then(res => {
          this.hostLoading = false
          if(res){
            const host = res.data
            console.log(host)
            this.project.host_list.push(host)
            this.hostDialogVisible = false
            this.initHostForm()
          }
        })
        }else{
         
          const params = JSON.parse(JSON.stringify(this.hostForm))
          this.$http.editHost(this.hostForm.id,this.hostForm).then(res => {
            this.hostLoading = false
            if(res){
         
              this.initHostForm()
              this.hostDialogVisible = false
              let result = res.data
              let index = 0
              for(let loop_project of this.project.host_list){
                if(loop_project.id == result.id){
                  Vue.set(this.project.host_list,index,result)   
                  break
                }
                index++
              }
              this.$message.success("恭喜！Host修改成功！")
            }
          })

        }
      })
    },

    onAddHostButtonClick(){
      this.dialogType = 'add'
      this.hostDialogVisible = true
    },

    onEditHost(host){
      this.hostForm = {
        name: host.name,
        host: host.host,
        description: host.description,
        id: host.id,
        project_id:this.project.id
      }
      this.hostDialogVisible = true
      this.dialogType = "edit"
    },
    onDeleteHost(host,index){
      this.$messagebox.confirm({
        message:"您确认要删除这个host嘛?",
        confirmCallback: ()=> {
          this.$loading.show()
          this.$http.deleteHost(host.id).then(res=>{
            this.project.host_list.splice(index,1)
            this.$loading.hide()
            this.$messagebox.success()
          })
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
</style>